<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>用户信息</title>
  </head>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <link
    href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css"
    rel="stylesheet"
  />
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <link rel="stylesheet" href="./cdn/all.css" media="screen" />
  <script src="./js/star.js"></script>
  <link href="./css/myinfo.css" rel="stylesheet" />
  <body>
    <div id="app">
      <star>
        <div class="uheader">
          <div class="个人信息">
            <span class="uimg">
              <img :src="user.avatarUrl"/>
            </span>
            <div class="信息">
              <h1 class="niceng">{{user.username}}</h1>
              <p class="ueamil">邮箱号: {{user.email}}</p>
              <p class="ueamil">手机号: {{user.phone}}</p>
              <div class="iszaixian">
                <span class="">●</span>
                <span class="">在线</span>
              </div>
            </div>
            <div class="点赞">
              <img :src="imageSrc" @click="toggleLike"/>
              <span>{{user.like}}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="生日">
            <div class="nvimg">
              <span>
                <img :src="seximg"/>
              </span>
              <span>{{age}}</span>
              <span>{{user.birthday}}</span>
            </div>
            <el-divider></el-divider>
            <div class="标签">
              <el-tag
                      :color="getRandomColor()"
                      :disable-transitions="false"
                      :key="tag"
                      @close="handleClose(tag)"
                      closable
                      effect="dark"
                      v-for="tag in user.tags"
              >
                {{tag}}
              </el-tag>
            </div>
            <el-divider></el-divider>
            <div class="个性签名">
              <span>个签:</span>
              <p>{{user.sign}}</p>
            </div>
            <el-divider></el-divider>
<!--            <div class="mt-4">-->
<!--              <div class="个人空间"></div>-->
<!--              <div class="个人照片">-->
<!--                <span>精选照片</span>-->
<!--              </div>-->
<!--              <div class="flex space-x-2 mt-2">-->
<!--                <img-->
<!--                  src="./asset/4.png"-->
<!--                  alt="精选照片 1"-->
<!--                  class="w-12 h-12 rounded"-->
<!--                  width="100"-->
<!--                  height="100"-->
<!--                  style="aspect-ratio: 50 / 50; object-fit: cover"-->
<!--                />-->
<!--                <img-->
<!--                  src="./asset/3.png"-->
<!--                  alt="精选照片 1"-->
<!--                  class="w-12 h-12 rounded"-->
<!--                  width="100"-->
<!--                  height="100"-->
<!--                  style="aspect-ratio: 50 / 50; object-fit: cover"-->
<!--                />-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <div class="bianji">
            <el-button >加好友</el-button>
            <el-button type="primary">留言</el-button>
          </div>
        </div>

      </star>
    </div>
  </body>
  <script>
    var v = new Vue({
      el: "#app",
      data: {
        isLiked: false,
        count:10,
        inputVisible: false,
        inputValue: "",
        textarea: "",
        age:'',
        seximg:'',
        user: {
          username: "",
          user_account: "",
          avatarUrl: "",
          gender: "",
          sign:"",
          birthday: "",
          imgs:"",
          phone: "",
          email: "",
          tags: [],
          like:""
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        options: [
          { value: 0, label: '男' },
          { value: 1, label: '女' }
        ],
        value1: '',
        tagColors:{}, // 用来存储标签对应的颜色
        file:'',
        userid: '',
      },
      computed: {
        // 计算图片的 URL
        imageSrc() {
          return this.isLiked ? './asset/已点赞.png' : './asset/点赞.png';
        }
      },
      created() {
        let token = sessionStorage.getItem("Token");
        axios.defaults.headers.common['Token'] = token;
        const url = new URL(window.location.href);
        // 从 URL 中获取 'id' 参数
        const id = url.searchParams.get('id');
        this.userid=id;
        axios.get("user/user/selectById?id=" + id).then(res => {
          if (res.data.code == 1) {
            this.user = res.data.data;
            this.user.tags = JSON.parse(this.user.tags);
            this.value1=this.user.birthday;
            if (this.user.avatarUrl==null) {
              this.user.avatarUrl = "./asset/默认图像.png";
            }
            const { monthDay, age } = extractMonthDayAndCalculateAge(this.user.birthday);
            this.user.birthday = monthDay;
            this.age = age;
            if (this.user.gender===0){
              this.seximg="./asset/男女-男.png"
            }else{
              this.seximg="./asset/男女-女.png"
            }
            if (this.user.sign==null) {
              this.user.sign = "该用户还没有个签";
            }
          } else {
            this.$alert('<strong><a href="login.html">点击跳转登录界面</a></strong>', '您还未登录,请先登录', {
              dangerouslyUseHTMLString: true
            });
          }
        });
      },
      methods: {
        getRandomColor() {
          // 生成随机颜色的方法，这里以示例为主，具体可以根据需求实现
          return "#" + Math.floor(Math.random() * 16777215).toString(16);
        },



        showInput() {
          this.inputVisible = true;
          this.$nextTick((_) => {
            this.$refs.saveTagInput.$refs.input.focus();
          });
        },

        toggleLike() {
          this.isLiked = true;
          // 可以在这里增加逻辑来更新点赞数，比如 +1 或 -1
          if (this.count>0){
            this.user.like += 1;
            this.count--;
            axios.get("/user/user/like",  {
              params: {
                like: this.user.like,
                id:this.userid
              }}).then(res => {

            })
          }else{
            if (this.count==0){
              this.$message({
                message: '今日同一好友点赞数已达上限',
                type: 'warning'
              });
            }
          }
        }
      },
    });
  </script>
<script>
  function calculateAge(birthdate) {
    const today = new Date();
    const birthDate = new Date(birthdate);
    let age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--;
    }

    return age+'岁';
  }
  // 提取月日和计算年龄的方法
  function extractMonthDayAndCalculateAge(dateStr) {
    const dt = new Date(dateStr);

    // 提取月日
    const month = dt.getMonth() + 1; // getMonth() 返回的是0到11
    const day = dt.getDate();
    const monthDay = `${month}月${day}日`;

    // 计算年龄
    const age = calculateAge(dt);
    return { monthDay, age };
  }
</script>
</html>
